<template>
  <div>
    <common-menu :to-path="['tagPublish','tagList']" :flag="1" :text="['新增','列表']"></common-menu>
    <keep-alive>
      <router-view></router-view>
    </keep-alive>
    <div class="my-padded-tb-large">
      <div class="ui container">
        <table class="ui celled table">
          <thead>
          <tr>
            <th></th>
            <th>名称</th>
            <th>更新时间</th>
            <th>操作</th>
          </tr>
          </thead>
          <tbody>
          <tr v-for="(tag, index) in tagList">
            <td>{{index+1}}</td>
            <td>{{tag.name}}</td>
            <td>{{tag.updateTime}}</td>
            <td>
              <router-link tag="a" :to="{name:'tagPublish', params:{tag:tag,flag:0,page:page.pageNum}}" class="ui blue basic button">编辑</router-link>
              <a @click="deleteTagById(tag.id,tag.name)" class="ui red basic button">删除</a>
            </td>
          </tr>
          </tbody>
          <tfoot>
          <tr>
            <th colspan="7">
              <div class="ui right floated pagination menu">
                <a @click="previousPage()" :class="previousPageClass + ' item'">上一页</a>
                <a @click="nextPage()" :class="nextPageClass + ' item'">下一页</a>
              </div>
            </th>
          </tr>
          </tfoot>
        </table>
      </div>
    </div>
  </div>
</template>

<script>
  import CommonMenu from "../../components/CommonMenu";
  import {deleteTagById, queryAllTagByLimit} from "../../api/tag";

  export default {
    name: "TagList",
    components: {CommonMenu},
    data() {
      return {
        tagList: [],
        page: {},
        previousPageClass: 'disabled',
        nextPageClass: '',
      }
    },
    activated() {
      // 新增后返回
      if (this.$route.query.flag === 1) {
        this.getTagList(this.page.pages)
      } else if (this.$route.query.flag === 0) {
        //  更新后返回
        this.getTagList(this.$route.query.page)
      }
    },
    created() {
      this.getTagList(1)
    },
    methods: {
      getTagList(page) {
        let query = {
          page,
          size: 5,
        }
        queryAllTagByLimit(query).then(res => {
          if (res.code === 200) {
            this.tagList = res.data.list;
            this.page = res.data;
            if (!this.page.hasPreviousPage) {
              this.previousPageClass = 'disabled'
            } else {
              this.previousPageClass = ''
            }
            if (!this.page.hasNextPage) {
              this.nextPageClass = 'disabled'
            } else {
              this.nextPageClass = ''
            }
          } else {
            return Promise.reject('error');
          }
        })
      },
      deleteTagById(id,name) {
        const h = this.$createElement;
        this.$msgbox({
          title: '消息',
          message: h('p', null, [
            h('span', null, '确认删除 '),
            h('strong', { style: 'color: teal' }, name),
            h('span', null, '吗 '),
          ]),
          showCancelButton: true,
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          beforeClose: (action, instance, done) => {
            if (action === 'confirm') {
              instance.confirmButtonLoading = true;
              instance.confirmButtonText = '执行中...';
              setTimeout(() => {
                done();
                setTimeout(() => {
                  instance.confirmButtonLoading = false;
                }, 300);
                let params = {
                  id: id
                }
                deleteTagById(params).then(res => {
                  if (res.code === 200) {
                    this.$message({
                      message: "删除成功",
                      type: 'success',
                    })
                    setTimeout(() => location.reload(),1000)
                  } else {
                    return Promise.reject('error');
                  }
                })
              }, 3000);
            } else {
              done();
            }
          }
        });
      },
      previousPage() {
        if (this.page.pageNum>1) {
          this.getTagList(this.page.pageNum-1)
        }
      },
      nextPage() {
        if (this.page.pageNum<this.page.pages) {
          this.getTagList(this.page.pageNum+1)
        }
      }
    },
  }
</script>

<style scoped>

</style>
